<template>
     <div>
        <table class="tb">
            <tr>
                <th>全选 <input type="checkbox" v-model="allcheck" @change="allcheckchange" ></th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <!-- 动态生成 -->
            <tr v-for="(item,index) in products" :key="item._id">
                <td>
                    <input type="checkbox" v-model="checks" :value="item">
                </td>
                <td>
                    <img  height="100" :src="item.imgsrc" alt="">
                </td>
                <td>
                    {{item.code}}
                </td>
                <td>
                    {{item.productName}}
                </td>
                <td>
                    {{item.price}}
                </td>
                <td>
                    <button @click="down(item)" :disabled="item.count==1">-</button>
                    &nbsp;
                    {{item.count}}
                    &nbsp;
                    <button @click="up(item)">+</button>
                </td>
                <td>
                    <button @click="dele(index)">删除</button>
                </td>
            </tr>
        </table>
        <h1 class="add">总价：{{total}}</h1>
    </div>
</template>

<script>
    export default {
        data(){
            return {   
                checks:[],
                allcheck:false
            }
        },
         props:{
                    products:{
                        type:Array
                    }
                },
                computed:{
            total(){
                let res = this.checks.reduce((total,item)=>{
                    return total += item.price*item.count
                },0)
                return res.toFixed(2)
            }
        },
        methods:{
            dele(index){
                this.products.splice(index,1)
                localStorage.setItem('data',JSON.stringify(this.products))
            },
          allcheckchange(){
            if(this.allcheck){
                this.checks = this.products
            }else{
                this.checks = [];
            }
          },
          up(item){
            item.count++
          },
          down(item){
            item.count--;
          }
        },
        watch:{
            checks(newVal){
                if(newVal.length === this.products.length){
                    this.allcheck = true
                }else{
                    this.allcheck = false
                }
            }
        }
     
    }
</script>




<style scoped>
    .tb{
        width: 815px;
        text-align: center;
        border-collapse: collapse;
    }
   
      .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
        
    }
</style>